<template>
	<div>
		<van-image width="100%" :src="APIDomainName + product.picture" style="width: 100%;position: relative;">
		</van-image>
		<div style="width: 100%;height:120%;background-color: rgba(255, 255, 255, 0.4);position: absolute;top: 0;"></div>
		<div style="background-color:#ffffff;border-radius: 2rem;position: relative;top: -5rem;margin-bottom: 2rem;">
			<div style="width: 90%;padding: 1rem 5% 0.5rem 5%;">
				<div style="display: flex;margin: 1rem auto 0;align-items: center;justify-content: space-between;">
					<div style="display: flex;align-items: center;width: 70%;">
						<div style="width: 30%;">
							<van-image width="100%" radius="20px" :src="APIDomainName + product.pic"></van-image>
						</div>
						<div style="margin-left: 5%;">
							<div style="font-weight: bold;font-size: 26px;">{{product.title}}</div>
							<div style="margin-top: 0.5rem;color: #999999;font-weight: bold;">
								{{product.labelone}}·{{product.labeltwo}}
							</div>
						</div>
					</div>
					<div style="width: 21%;text-align: center;font-size: 40px;color: red;font-weight: bold;">
						￥{{product.nowprice}}</div>
				</div>
			</div>
			<van-tabs v-model="activeName" color="#01CBE2" animated>
				<van-tab title="详情" title-style="font-size:20px;" name="a">
					<div style="width: 90%;padding: 0 5% 0 5%;margin-top: 1.5rem ;">
						<van-swipe :autoplay="3000" style="border-radius: 1rem;">
							<van-swipe-item v-for="(img,i) in carouselList" :key="i">
								<van-image width="100%" :src="APIDomainName + img"></van-image>
							</van-swipe-item>
						</van-swipe>
					</div>
					<div style="width: 90%;padding: 1.5rem 5% 0 5%;">
						<div style="font-size: 24px;font-weight: bold;">简介</div>
						<div style="color: #999999;margin-top: 0.5rem;">{{product.detail}}</div>
						<div style="font-size: 24px;font-weight: bold;margin-top: 1.5rem;">详细信息</div>
						<van-cell-group>
							<van-cell title-class="messagetitle" value-class="messagevalue" title="厂商"
								:value="product.company" />
							<van-cell title-class="messagetitle" value-class="messagevalue" title="供应商"
								:value="product.provider" />
							<van-cell title-class="messagetitle" value-class="messagevalue" title="系统版本"
								:value="product.version" />
							<van-cell title-class="messagetitle" value-class="messagevalue" title="游戏大小"
								:value="product.playsize" />
							<van-cell title-class="messagetitle" value-class="messagevalue" title="更新时间"
								:value="Time(product.playtime)" />
							<van-cell title-class="messagetitle" value-class="messagevalue" title="网络"
								:value="product.internet" />
						</van-cell-group>
					</div>

				</van-tab>
				<van-tab :title="`评论`" title-style="font-size:20px;" name="b">
					<div @click="onReview(product.id)" style="text-align: center;">
						<div style="display: flex;align-items: center;width: 15rem;margin: 0 auto;margin-top: 1rem;"
							>
							<div>
								<van-image :src="avatar" width="50px"
									style="box-shadow: 0px 0px 5px #C8C9CC;margin-right: 0.5rem;" round></van-image>
							</div>
							<div>轻点发布我的评价</div>
						</div>
						
						
					</div>
					<div style="width: 95%;background-color: #F6F7F9;margin: 1rem auto 0;border-radius: 1rem;"
						v-for="(item,i) in productreview" :key="i">
						<div style="width: 90%;padding: 1rem 5% 1rem 5%;">
							<div style="display: flex;align-items: center;justify-content: space-between;">
								<div style="display: flex;align-items: center;">
									<div>
										<van-image width="100%" :src="APIDomainName + item.avatar" radius="50%"
											style="width: 3.5rem;"></van-image>
									</div>
									<div style="margin-left: 1rem;">
										<div style="font-weight: bold;margin-right: 0.3rem;">{{item.name}}</div>
										<div style="color: #BABFC2;margin-top: 0.5rem;">
											{{Time(item.date)}}
											</span>
										</div>
									</div>
								</div>
								<div v-show="item.user_id==user.id" @click="deleteReview(item.id)">
									<van-icon name="delete-o" size="20px"/>
								</div>

							</div>
							<van-rate
							  v-model="item.value"
							  :size="20"
							  color="#14C5CD"
							  void-icon="star"
							  void-color="#eee"
							/>
							<div style="margin:0.5rem 0 1rem 0;">{{item.detail}}</div>
							<div
								style="width: 50%;margin: 0 0 0 50%;display: flex;color: #878C92;align-items: center;margin-top: 1rem;justify-content: space-around;">
								<div style="display: flex;align-items: center;width: 40%;"><img src="@/assets/share.png"
										style="width: 1.5rem;" alt="" @click="onForward(item.id)">
									<!-- <div style="margin-left: 0.5rem;">12</div> -->
								</div>
								<div style="display: flex;align-items: center;width: 40%;"><img
										src="@/assets/review.png" style="width: 1.5rem;" alt="" @click="onReviewDetail(item.id)">
										<div style="margin-left: 0.5rem;">{{item.count}}</div>
								</div>
								<div style="display: flex;align-items: center;width: 20%;">
									<img src="@/assets/likebule.png" style="width: 1.5rem;" alt="" v-if="islike[i]"
										@click="onClickCancelLike(item.id,i)">
									<img src="@/assets/like.png" style="width: 1.5rem;"
										@click="onClickAddLike(item.id,i)" v-else alt="">
									<div style="margin-left: 0.5rem;">{{likecount[i]}}</div>
								</div>
							</div>
						</div>
					</div>
				</van-tab>
				<van-tab title="论坛" title-style="font-size:20px;" name="c" :to="{name:'forumDetail'}"></van-tab>
			</van-tabs>
			<van-popup v-model="show" style="width: 80%;border-radius: 20px;padding: 1rem 1rem 2rem;">
				<van-field v-model="remark" rows="5" autosize type="textarea" placeholder="写下你的想法" />
				<div style="background-color: #F5F7F8;padding: 1rem;margin: 0 1rem;border-radius: 10px;">
					<div><span style="color: #666;">//</span>@{{user.name}}: <span style="color: #C7CBCE;">转发动态</span>
					</div>
					<div style="background-color: #ccc;height: 0.07rem;margin-top: 1rem;"></div>
					<div style="display: flex;margin-top: 1rem;">
						<van-image width="30%" :src="APIDomainName + product.picture" radius="10px"
							style="width: 30%;height: 30%;"></van-image>
						<div style="margin-left: 1rem;">
							<div style="font-size: 18px;">
								@{{review.name}} <span style="color: #B9BEC1;">评价了</span>{{product.title}}
							</div>
							<div style="margin-top: 1rem;">{{Time(review.date)}}</div>
						</div>
					</div>
					<div style="color: #666;margin-top: 1rem;">
						{{review.detail}}
					</div>
				</div>
				<div style="width: 100%;">
					<van-button size="large"
						style="margin-left: 78%;background-color: #14C5CD; color: #ffffff;width: 20%;font-weight: bold;font-size: 16px;border: 0;margin-top: 1rem;border-radius: 10px;height: 2.5rem;"
						@click="onPublish()">
						发布
					</van-button>
				</div>
			</van-popup>
		</div>
		<van-goods-action v-show="bottomcart()">
			<van-goods-action-icon icon="star-o" text="收藏" v-if="isCollection" @click="onClickAddCollection()" />
			<van-goods-action-icon icon="star" text="已收藏" color="#ff5000" v-else
				@click="onClickCancelCollection(product.id)" />
			<van-goods-action-icon icon="cart-o" text="购物车" :to="{name:'shopcart'}" />
			<van-goods-action-button type="danger" color="rgba(1, 203, 226, 0.5)" text="加入购物车"
				@click="onClickAddShopcart" />
			<van-goods-action-button type="danger" color="#01CBE2" text="立即购买" @click="onClickBuy()" />
		</van-goods-action>
	</div>
</template>



<script>
	import {
		addCartAPI
	} from "@/api/cart.js"; //将商品添加购物车接口，根据id获取商品对象（详情）
	import {
		getProductDetailByIdAPI,
		getProductReviewByIdAPI,
		addLikeAPI,
		getReviewIslikeByIdAPI,
		deleteLikeAPI,
		getforwardAPI,
		deleteReviewByIdAPI
	} from "@/api/product.js";
	import {
		addCollectionAPI,
		delCollectionItemAPI,
		ischeckedCollectionAPI
	} from "@/api/collection.js";
	import * as Tools from "@/utils/tools.js"
	import {
		getUserLocal,
	} from "@/utils/auth.js"
	import {
		getDetailByIdAPI
	} from "@/api/user.js";
	export default {
		data() {
			return {
				avatar: '',
				user: {},
				activeName: 'a',
				value: 3,
				product: {},
				count: 0,
				amount: 0,
				isCollection: true,
				number: 3,
				show: false,
				isgood: false,
				productreview: [],
				carouselList: [],
				isShow: true,
				islike: [],
				likecount: [],
				remark: '',
				review: {},
				valuenone:1,
			}
		},
		methods: {
			deleteReview(id){
				deleteReviewByIdAPI(id).then(result => {
					this.getProductReview();
				}).catch(() => {});
			},
			onPublish() {
				this.show = false;
				this.$toast({
					message: '发布成功',
					icon: 'success',
				});;
			},
			onForward(id) {
				this.show = true;
				getforwardAPI(id).then(result => {
					this.review = result.data;
					console.log(result.data)
				}).catch(() => {});
			},
			bottomcart() {
				if (this.activeName == 'b') {
					return false;
				} else {
					return true;
				}
			},
			onBack() {
				this.$router.go(-1);
			},
			onClickAddShopcart() {
				let params = {
					product_id: this.product.id,
				};
				//2.使用封装后的接口,注意：接口有参数
				addCartAPI(params).then(result => {
					this.$toast(result.msg);
				}).catch(() => {});
			},
			onClickAddCollection() {
				this.isCollection = false;
				let params = {
					product_id: this.product.id,
				};
				//2.使用封装后的接口,注意：接口有参数
				addCollectionAPI(params).then(result => {
					this.$toast(result.msg);
				}).catch(() => {});
			},
			onClickCancelCollection(id) {
				this.isCollection = true;
				let ids = id;
				delCollectionItemAPI(ids).then(result => {
					this.$toast(result.msg);
				}).catch(() => {});
			},
			onReview(id) {
				this.$router.push({
					name: "productReview",
					params: {
						id
					},
				});
			},
			onReviewDetail(id) {
				this.$router.push({
					name: "productReviewDetail",
					params: {
						id
					},
				});
			},
			onClickBuy() {
				let id = this.product.id;
				this.$router.push({
					name: "orderCreate",
					params: {
						id
					},
				});
			},
			Time(i) {
				let date = new Date(i);
				return Tools.dateFormat(date, "yyyy年MM月dd日");
			},
			onSearch() {
				this.islike = [];
				this.islike.length = this.productreview.length;
				let id = this.$route.params.id;
				getReviewIslikeByIdAPI(id).then(result => {
					this.islike.length = this.productreview.length;
					var a = [];
					result.data[1].forEach(item => {
						a.push(item.id);
					});
					console.log(a)
					var j = 0;
					result.data[0].forEach(item => {
						if (item.is_checked == 0) {
							item.is_checked = false;
						} else if (item.is_checked == 1) {
							item.is_checked = true;
						}
						for (var i = 0; i < a.length; i++) {
							if (a[i] == item.id) {
								this.islike[i] = item.is_checked;
							}
						}
						j++;
					}); //数据的遍历
					for (var i = 0; i < this.islike.length; i++) {
						if (this.islike[i] == null) {
							this.islike[i] = false;
						}
					}
					result.data[1].forEach(item => {
						this.likecount.push(item.likeit);
					});
				});
			},
			onClickAddLike(id, i) {
				this.islike[i] = true;
				this.likecount[i] = this.likecount[i] + 1;
				// console.log(id);
				let data = {
					review_id: id,
				}
				//2.使用封装后的接口,注意：接口有参数
				addLikeAPI(data).then(result => {
					this.$toast(result.msg);
				}).catch(() => {});
				this.getProductReview();
			},
			onClickCancelLike(id, i) {
				this.islike[i] = false;
				this.likecount[i] = this.likecount[i] - 1;
				let ids = id;
				deleteLikeAPI(ids).then(result => {
					this.$toast(result.msg);
				}).catch(() => {});
				this.getProductReview();
			},
			getProductReview() {
				let id = this.$route.params.id;
				getProductReviewByIdAPI(id).then(result => {
					// this.$toast(result.msg);
					this.productreview = result.data;
					// console.log(result);
				}).catch(() => {});
			},

		},
		created() {
			let id = this.$route.params.id;
			getProductDetailByIdAPI(id).then((result) => {
				console.log(result);
				this.product = result.data;
				this.amount = result.data.nowprice;
				//根据返回数据生成轮播图数组（用商品的中图片）
				this.product.picList.forEach(item => {
					this.carouselList.push(item.pic);
				}); //数据的遍历

				let params = {
					product_id: this.product.id,
				};
				//2.使用封装后的接口,注意：接口有参数
				ischeckedCollectionAPI(params).then(result => {
					// this.$toast(result.msg);
					console.log(result)
					let is_checked = result.data[0].is_checked;
					if (is_checked == 1) {
						this.isCollection = false;
					} else if (is_checked == 0) {
						this.isCollection = true;
					}
				}).catch(() => {});

			});
			this.getProductReview();
			this.onSearch();
		},
		mounted() {
			//初始页面数据
			this.user = getUserLocal();
			getDetailByIdAPI(this.user.id).then(result => {
				this.avatar = this.APIDomainName + result.data.avatar;
			}).catch(() => {});
		}
	}
</script>



<style lang="less" scoped>
	.van-swipe {
		margin: 0 auto;
	}

	.van-swipe__indicator--active {
		background-color: #01CBE2;
	}

	.messagevalue {
		font-size: 16px;
	}

	.messagetitle {
		font-size: 16px;
	}

	[class*=van-hairline]::after {
		border: 0 solid #ebedf0;
	}

	.van-cell-group .van-cell {
		padding-left: 0;
		padding-right: 0;
	}

	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		line-height: 150px;
		text-align: center;
		/* background-color: #39a9ed; */
	}

	.van-field {
		font-size: 18px;
	}
</style>
